<template>
  <div style="
    display: flex;
    flex-direction: column;
  " ref="role">
    <Form style="display: flex;margin: 2px 0px 10px" ref="formEquipment" :model="roleSearchForm" :label-width="100">
      <FormItem :label="'角色名：'">
        <Input v-model="roleSearchForm.roleName" placeholder="请输入角色名称" style="width: 200px"/>
      </FormItem>
      <div style="width: 100%;margin-left: 10px">
        <Button icon="ios-search" type="primary" @click="handleSearch()">查询</Button>
        <Button type="default" style="margin-left: 10px" @click="handleReset()">重置</Button>
      </div>
    </Form>
    <Row style="background:#fff;padding:0px">
      <Col span="6" style="padding:10px;">
        <Card style="cursor: pointer;">
          <div style="text-align:center" v-on:click="newRole()">
            <Icon type="ios-add" size="50"></Icon>
            <h3>新增</h3>
          </div>
        </Card>
      </Col>
      <Col span="6" v-for="role in roles" style="padding:10px; " :key="role.id">
        <Card style="cursor: pointer;">
          <div style="text-align:center" v-on:click="showDetail(role.id)">
            <div style="position:absolute;right:5px;top:5px;cursor:pointer;" v-on:click.stop="deleteConfirm(role.id)">
              <Icon type="md-close" size="20"></Icon>
            </div>
            <Icon :type="role.icon" size="50"></Icon>
            <h3>{{ role.name }}</h3>
          </div>
        </Card>
      </Col>
    </Row>
    <a style="text-align: center" @click="handleSearch('add')" v-if="roles.length !== recordsTotal">加载数据</a>
    <span style="text-align: center" v-else>数据已全部加载</span>
  </div>
</template>
<script>
export default {
  name: 'roleList',
  data () {
    return {
      roles: [],
      item: {
        url: '/api/system/cscpRolessByCriteria'
      },
      roleSearchForm: {},
      pageSize: 11,
      currentPageIndex: 1,
      recordsTotal: 0,
      loading: false
    }
  },
  methods: {
    init () {
      this.roleList()
      document.addEventListener('mousewheel', this.handleScroll, false)
    },
    handleScroll (e) {
      let parent = this.$refs.role.parentElement
      let scrollBottom =
        parent.scrollHeight -
        parent.scrollTop -
        parent.clientHeight
      // 下滚轮
      if (e.wheelDelta < 0 && this.recordsTotal !== this.roles.length && !this.loading && scrollBottom === 0) {
        this.$Spin.show()
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.roleList('add')
          this.$Spin.hide()
        }, 500)
      }
    },
    handleSearch (type) {
      this.roleList(type)
    },
    handleReset () {
      this.roleSearchForm = {}
      this.pageSize = 11
      this.currentPageIndex = 1
      this.recordsTotal = 0
      this.roleList()
    },
    roleList (type) {
      if (type === 'add') {
        this.pageSize = this.pageSize + 8
      }
      let msg = this.$Message.loading({
        content: '正在获取数据',
        duration: 0
      })
      const [url, httpConfig] = [
        '/api/system/cscpRolessByCriteria',
        {
          params: {
            'name.contains': this.roleSearchForm.roleName,
            page: this.currentPageIndex,
            size: this.pageSize
          }
        }
      ]
      this.$http.get(url, httpConfig).then(response => {
        this.roles = response.data.data
        this.recordsTotal = response.data.recordsTotal
        msg()
      }).catch(error => {
        if (type === 'add') {
          this.pageSize = this.pageSize - 8
        }
        msg()
        if (error.response) {
          this.$Message.error('获取数据失败！')
        }
      })
    },
    showDetail (id) {
      this.$byStoreSet('role-edit', { id })
      this.$router.push({ name: 'role-edit' })
    },
    deleteConfirm (id) {
      this.$http.get(`/api/system/cscpRoleUsers/${id}`).then(res => {
        if (res.data) {
          this.$Message.warning(`该角色已被 ${res.data} 个账号使用，禁止删除。`)
        } else {
          this.deleteRole(id)
        }
      }).catch(error => {
        if (error.response) {
          this.$Message.error(error.response.data.title ? error.response.data.title : '角色删除失败！')
        }
      })
    },
    deleteRole (id) {
      const url = `/api/system/cscpRoless/${id}`
      this.$http.delete(url).then(() => {
        this.$Message.success('角色删除成功！')
        this.roleList()
      }).catch(error => {
        if (error.response) {
          this.$Message.error(error.response.data.title ? error.response.data.title : '角色删除失败！')
        }
      })
    },
    newRole () {
      this.$router.push({ name: 'role-add' })
    }
  },
  created () {
    this.init()
  },
  destroyed () {
    document.removeEventListener('mousewheel', this.handleScroll, false)
  }
}
</script>

<style scoped lang="less">
::v-deep .ivu-form-item{
  margin-bottom: 0;
}
</style>
